<template>
  <!-- 专利详情 -->
  <div>
    <v-layout>
      <v-flex class="vflex" xs12>
        <h3 class="patent-title">
          <span>{{ basicData.t }}</span>
          <img
            v-if="basicData.t"
            @click="downloadPdf"
            class="psd-icon"
            src="./img/pdf.png"
            alt="pdf下载"
            ondragstart="return false"
          />
        </h3>
      </v-flex>
    </v-layout>
    <!-- 基本信息 -->
    <v-card class="vcard">
      <v-card-title class="vcard-title"
        ><i></i>{{ $t("assessment.BasicInfo") }}</v-card-title
      >
      <p class="abstract">
        <i>摘要</i>
        <span>{{
          basicData.abst || this.$t("assessment.NoDataAvailable")
        }}</span>
      </p>
      <ul class="basic-info">
        <li>
          <span>{{ $t("assessment.ApplicationNo") }}</span>
          <span>{{ basicData.ap }}</span>
          <span>{{ $t("assessment.ApplicationDate") }}</span>
          <span>{{
            basicData.ad !== "" &&
            basicData.ad !== undefined &&
            basicData.ad !== null
              ? basicData.ad.substr(0, 4) +
                "-" +
                basicData.ad.substr(4, 2) +
                "-" +
                basicData.ad.substr(6, 2)
              : "-"
          }}</span>
          <span>主分类号</span>
          <span>{{ basicData.l && basicData.l.key }}</span>
        </li>
        <li>
          <span>{{ $t("assessment.PublicNoticeNo") }}</span>
          <span>{{ basicData.p }}</span>
          <span>{{ $t("assessment.Publication") }}</span>
          <!--              <span>{{basicData.isd}}</span>-->
          <span>{{
            basicData.isd !== "" &&
            basicData.isd !== undefined &&
            basicData.isd !== null
              ? basicData.isd.substr(0, 4) +
                "-" +
                basicData.isd.substr(4, 2) +
                "-" +
                basicData.isd.substr(6, 2)
              : "-"
          }}</span>
          <span>IPC</span>
          <span>{{ basicData.icls }}</span>
        </li>
        <li>
          <span>{{ $t("assessment.Applicant") }}</span>
          <span>{{ basicData.aList && basicData.aList.join(",") }}</span>
          <span>{{ $t("assessment.Inventor") }}</span>
          <span>{{ basicData.iList && basicData.iList.join(",") }}</span>
          <span>{{ $t("search.Address") }}</span>
          <span>{{ address }}</span>
        </li>
      </ul>
    </v-card>
    <!-- 法律信息 -->
    <v-layout>
      <v-flex style="width: 100%;" xs12>
        <v-card class="vcard" style="width: 100%; ">
          <v-card-title class="vcard-title"><i></i>法律信息</v-card-title>
          <el-table
            :data="legalData"
            style="width: 100%; margin-top: 20px;"
            :header-cell-style="patentHeaderStyle"
            :cell-style="patentCellStyle"
          >
            <el-table-column
              type="index"
              :label="$t('assessment.SN')"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="PD" label="变更日期" width="180">
            </el-table-column>
            <el-table-column prop="Type" :label="$t('assessment.LegalStatus')">
            </el-table-column>
            <!-- prop="Content"  -->
            <!-- zjs/2020/03/10 -->
            <el-table-column label="详情">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" placement="left-end">
                  <div
                    style="line-height:20px;"
                    slot="content"
                    v-html="content(scope.row.Content)"
                  ></div>
                  <p>{{ scope.row.Content | br }}</p>
                </el-tooltip>
              </template>
            </el-table-column>
            <template v-if="legalLoading === true" slot="empty">
              加载中...
            </template>
            <template v-if="legalLoading === 'no-data'" slot="empty">
              {{ $t("assessment.NoDataAvailable") }}
            </template>
          </el-table>
        </v-card>
      </v-flex>
    </v-layout>
    <!-- 相关专利 -->
    <v-layout>
      <v-flex xs12>
        <v-card class="vcard" style="width: 100%; ">
          <v-card-title class="vcard-title"><i></i>相关专利</v-card-title>
          <el-table
            :data="relevantData"
            style="width: 100%; margin-top: 20px;"
            :header-cell-style="patentHeaderStyle"
            :cell-style="patentCellStyle"
          >
            <el-table-column
              type="index"
              width="100"
              align="center"
              :label="$t('assessment.SN')"
            >
            </el-table-column>
            <el-table-column
              prop="score"
              width="100"
              align="center"
              :label="$t('assessment.Score')"
            >
            </el-table-column>
            <el-table-column prop="r" width="160" align="center" label="相关度">
            </el-table-column>
            <el-table-column prop="p" :label="$t('assessment.PatentNo')">
              <template slot-scope="scope">{{
                scope.row.p || scope.row.pn
              }}</template>
            </el-table-column>
            <el-table-column prop="a" :label="$t('assessment.Applicant')">
            </el-table-column>
            <el-table-column prop="t" label="专利名称">
              <template slot-scope="scope">{{
                scope.row.t || scope.row.title
              }}</template>
            </el-table-column>
            <template v-if="relevantLoading === true" slot="empty">
              加载中...
            </template>
            <template v-if="relevantLoading === 'no-data'" slot="empty">
              {{ $t("assessment.NoDataAvailable") }}
            </template>
          </el-table>
        </v-card>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      basicData: [],
      legalData: [],
      relevantData: [],
      patentHeaderStyle: function() {
        return "font-weight: 600; color: #241c75;";
      },
      patentCellStyle: function() {
        return "color: #7674a3";
      },
      pn: "",
      address: "",
      searchPn: this.$route.query.pn || "",
      // 法律信息加载中
      legalLoading: true,
      // 相关专利加载中
      relevantLoading: true,
    };
  },
  filters: {
    br(val) {
      if (val) {
        return val.replace(/<br>/g, " ");
      }
    },
  },
  methods: {
    content(val) {
      if (val) {
        let str = "";
        return (str = val.split("<br>").join("<br/>"));
      }
    },
    getBasicData() {
      // 获取专利列表
      this.$post(this.$Url.patent.basicInfo, {
        sf: "QueryFulltext",
        istype: "1",
        ialist: "1",
        sx: "cn/queryfulltext_cn",
        iclient: "1",
        isClick: 1,
        foo: "SEARCH-MASTER",
        sl: "chs",
        itrans: "1",
        fooShowPN: "null",
        ispage: "100",
        advanceSearchHistory: "false",
        idi: "274766528119",
        // "sq": `apn/${this.$route.query.p} or pns/${this.$route.query.p}`,
        sq: `apn/${this.searchPn} or pns/${this.searchPn}`,
        sqtype: "1",
        ishowAbst: 1,
      })
        .then((data) => {
          if (data.data.PatentList) {
            this.basicData = data.data.PatentList[0];
            this.pn = data.data.PatentList[0].PN;
          }
          this.getLegalInfo();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取地址
    getAddress() {
      this.$post(this.$Url.patent.address, {
        sqtype: "1",
        ishowAbst: 1,
        sf: "ShowPatent",
        sl: "chs",
        // spn: `${this.$route.query.p}`,
        spn: `${this.searchPn}`,
        sx: "showpatent_cn",
      })
        .then((data) => {
          if (data.data.Patent.Header) {
            this.address = data.data.Patent.Header.NameAddress;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取法律信息
    getLegalInfo() {
      this.$post(this.$Url.patent.legal, {
        ipn: this.pn,
        sf: "QueryLegalStatus2",
      })
        .then((data) => {
          // let data = res.data
          // let legalData = []
          // if (data) {
          //   if (data.LegalStatusList) { // 普通的
          //     if (data.LegalStatusList instanceof Array) {
          //       legalData = data.LegalStatusList;
          //     } else {
          //       legalData.push(data.LegalStatusList);
          //     }
          //   } else if (data.DocdbLegalStatusList) { // WO
          //     data.DocdbLegalStatusList.forEach(v => {
          //       legalData.push({
          //         PD: v.Date,
          //         Type: v.Type,
          //         Content: v.Desc
          //       })
          //     })
          //   }
          // } else {
          //   this.legalLoading = 'no-data'
          // }
          let LegalStatusList = data.data.Result.LegalStatusList;
          if (LegalStatusList) {
            if (LegalStatusList.LegalStatus.length > 0) {
              for (let i = 0; i < LegalStatusList.LegalStatus.length; i++) {
                let obj = {
                  PD: LegalStatusList.LegalStatus[i].PD,
                  Type: LegalStatusList.LegalStatus[i].Type,
                  Content: LegalStatusList.LegalStatus[i].Content,
                };
                this.legalData.push(obj);
              }
            } else {
              this.legalData.push(LegalStatusList.LegalStatus);
            }
          }

          // 对象数组 去重
          // const hash = {}
          // const newArray = legalData.reduce((item, next)=>{
          //   hash[next.PD] ? '' : hash[next.PD] = true && item.push(next);
          //   return item;
          // },[])
          // this.legalData = newArray
        })
        .catch((error) => {
          this.legalLoading = "no-data";
          console.log(error);
        });
    },
    // 相关专利
    getRelevantPatent() {
      this.$get(this.$Url.patent.relevant, {
        pn: this.searchPn,
      })
        .then((data) => {
          if (data.data) {
            this.relevantData = data.data;
          } else {
            this.relevantLoading = "no-data";
          }
        })
        .catch((error) => {
          this.relevantLoading = "no-data";
          console.log(error);
        });
    },
    // pdf下载
    downloadPdf() {
      this.$get(this.$Url.patent.pdf, {
        pn: this.basicData.p,
      })
        .then((res) => {
          let data = res.data;
          if (data) {
            window.open(data.epUrl);
          } else {
            window.open(`${this.$Url.patent.pdf}?pn=${this.basicData.p}`);
          }
        })
        .catch((err) => {});
    },
  },
  mounted() {
    this.getBasicData();
    this.getAddress();
    this.getRelevantPatent();
  },
};
</script>

<style lang="scss" scoped>
.vflex {
  margin-bottom: 20px;
}
.vcard {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.vcard-title {
  position: relative;
  padding-top: 20px !important;
  font-size: 14px;
  font-weight: 600;
  color: #241c75;
}
.vcard-title i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 20px;
  margin-top: -8px;
  background-color: $mainColor;
}
.patent-title {
  margin-top: 10px;
  margin-bottom: 10px;
  text-indent: 4px;
  font-size: 15px;
  color: $mainColor;
}
.patent-title span {
  display: inline-block;
  vertical-align: middle;
}
.patent-title .psd-icon {
  display: inline-block;
  height: 24px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
}
.abstract {
  position: relative;
  width: 100%;
  margin-top: 20px;
}
.abstract i {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100px;
  text-align: center;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: $mainColor;
}
.abstract span {
  display: block;
  line-height: 20px;
  padding-left: 100px;
  padding-right: 20px;
  font-size: 12px;
  color: #7674a3;
}
.basic-info {
  width: 100%;
  list-style: none;
  padding-left: 0;
  margin: 0 20px;
  border: 1px solid #ececf5;
}
.basic-info li {
  border: 1px #ececf5 solid;
  color: #838895;
}
.basic-info li span {
  display: table-cell;
  width: 200px;
  max-width: 380px;
  max-height: 296px;
  padding: 14px 8px;
  word-break: break-all;
  vertical-align: middle;
  font-size: 12px;
}
.basic-info li span:nth-child(odd) {
  width: 151px;
  font-weight: 600;
  color: $mainColor;
  background-color: #f9f9ff;
}
.basic-info li span:nth-child(even) {
  width: 380px;
  line-height: 20px;
}
</style>
